<template>
  <Form ref="formValidate" :model="role" :rules="ruleValidate" :label-width="80">
    <FormItem label="角色名称" prop="roleName">
      <Input v-model="role.roleName" placeholder="请输入角色名称"></Input>
    </FormItem>
    <FormItem label="顺序" prop="roleSort">
      <InputNumber placeholder="排序号" v-model="role.roleSort"></InputNumber>
    </FormItem>

    <FormItem label="描述" prop="roleDesc">
      <Input
        v-model="role.roleDesc"
        type="textarea"
        :autosize="{minRows: 2,maxRows: 5}"
        placeholder="描述..."
      ></Input>
    </FormItem>
    <FormItem>
      <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
      <Button type="default" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
    </FormItem>
  </Form>
</template>
<script>
import { create } from "../../api/role.js";
export default {
  props: ["roleNum"],
  data() {
    return {
      role: {
        roleName: "",
        roleDesc: "",
        roleSort: 1
      },
      ruleValidate: {
        roleName: [
          { required: true, type: "string", message: "必填", trigger: "blur" }
        ],
        roleDesc: [
          { required: true, type: "string", message: "必填", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          console.log(this.role);
          create(this.role).then(result => {
            if (result.data.success) {
              this.$Message.success(result.data.msg);
            } else {
              this.$Message.error(result.data.error);
            }
            this.$emit("close");
          });
        } else {
          this.$Message.error("验证失败!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  },
  watch: {
    roleNum(newVal, oldVal) {
      this.role.roleSort = newVal;
    }
  }
};
</script>
